<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ecommerce Template</title>
<!--   <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> -->
<!--   <script src="http://code.jquery.com/jquery-1.9.1.js"></script> -->
<!--   <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> -->
<!--   <link rel="stylesheet" href="/resources/demos/style.css"> -->

<link rel="stylesheet" href="resources/custom.css" media="all"/>
<link rel="stylesheet" href="resources/jquery/css/jquery-ui-1.10.2.smoothness.min.css" media="all"/>
<link rel="stylesheet" href="resources/jqwidgets/css/jqx.base.css" type="text/css" />

<script src="resources/jquery/js/jquery-1.9.1.min.js"></script>
<script src="resources/jquery/js/jquery-ui-1.10.2.smoothness.min.js"></script>
<script src="resources/jquery/js/jquery-validate.min.js"></script>
  <script>
  $(document).ready(function() {
	  var tabOpts = {
		        activate: handleTabSelect,
		        // fx has been deprecated
		        show: {
		            height: 'toggle',
		            opacity: 'toggle'
		        }
		    };	  
    $( "#tabs" ).tabs(tabOpts);
    
    function handleTabSelect(event, tab) {
    	 
        if (tab.newPanel.selector === "#tabs-1") {
            console.log("tab one");
            alert("tab one");
        }
        if (tab.newPanel.selector === "#tabs-2") {
            console.log("tab two");
            alert("tab two");
        }
    }    
  });
  </script>
</head>
<body>
 
<div id="tabs">
  <ul>
    <li><a href="CustomerProfile.do">Customer</a></li>
    <li><a href="ProductProfile.do">Product</a></li>
    <li><a href="#tabs-3">Order</a></li>
  </ul>
  <div id="tabs-1">
  </div>
  <div id="tabs-2">
  </div>
  <div id="tabs-3">
  </div>
</div>
 
 
</body>
</html>